<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Five ECharts Bar Charts Example for Top 10 Shop Marketing Data by Month</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        /* 基础样式重置 */
        body, h1, h2, h3, p, ul, li {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
        }

        h1, h2, h3 {
            font-weight: bold;
        }

        h2 {
            margin-top: 40px;
        }

        p, li {
            text-align: left;
            color: #555;
        }

        /* 页面布局和组件样式 */
        .charts-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .chart-container {
            width: calc(20% - 20px);
            height: 400px;
            margin-bottom: 20px;
        }

        .analysis-and-chart-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 40px;
        }

        .analysis-text {
            flex-basis: 60%;
            margin-right: 20px;
        }

        #totalSalesChart {
            width: calc(30% - 20px);
        }

        .analysis-text ul li {
            list-style: disc inside;
            margin-left: 20px;
        }

        .chart-and-summary-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 40px;
        }

        #locationChart {
            flex-grow: 1;
            width: calc(60% - 20px);
            margin-bottom: 20px;
        }

        #locationSummary {
            width: calc(35% - 20px);
            margin-left: 20px;
        }

        /* 总结部分的优化 */
        .summary-section {
            margin-bottom: 100px;
            text-align: center;
        }

        .summary-section h2 {
            margin-bottom: 20px;
        }

        .summary-section p {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
        }

    </style>
</head>
<body>
<div class="charts-container">
    <div class="chart-container" id="chart1"></div>
    <div class="chart-container" id="chart2"></div>
    <div class="chart-container" id="chart3"></div>
    <div class="chart-container" id="chart4"></div>
    <div class="chart-container" id="chart5"></div>
</div>

<script>    $(document).ready(function() {
    function initChart(chartId, jsonDataUrl, monthTitle) {
        var chart = echarts.init(document.getElementById(chartId));

        $.getJSON(jsonDataUrl, function(data) {
            var categories = data.map(function(item) {
                return item.location;
            });
            var values = data.map(function(item) {
                return item.count;
            });

            var option = {
                title: {
                    text: monthTitle, // 添加月份标题
                    left: 'center' // 标题居中
                },
                xAxis: {
                    type: 'category',
                    data: categories,
                    inverse: true,
                    axisLabel: {
                        rotate: 90,
                        interval: 0
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: values,
                    type: 'bar'
                }]
            };

            chart.setOption(option);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data for ' + chartId + ':', textStatus, errorThrown);
        });
    }
    function initTotalSalesLineChart() {
        var chart = echarts.init(document.getElementById('totalSalesChart'));

// 模拟五个月的总营销量数据，根据总结描述调整数值
        var mockData = [
            {month: 'July', totalSales: 6000}, // 假设稳步增长的起点
            {month: 'August', totalSales: 8000}, // 八月高峰
            {month: 'September', totalSales: 7000}, // 九月相比八月略有下滑
            {month: 'October', totalSales: 7500}, // 十月实现反弹
            {month: 'November', totalSales: 7800} // 十一月趋稳，接近八月但略低
        ];

        var months = mockData.map(function(item) {
            return item.month;
        });
        var totalSalesValues = mockData.map(function(item) {
            return item.totalSales;
        });

        var option = {
            title: {
                text: '每月总营销量',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: months,
                axisLabel: { // 添加这部分配置
                    rotate: 45, // 旋转角度，根据需要调整
                    interval: 'auto', // 自动决定是否省略标签
                    overflow: 'truncate', // 超出部分截断
                    ellipsis: '...'
                }
            },
            yAxis: {},
            series: [{
                name: '总营销量',
                type: 'line',
                data: totalSalesValues
            }]
        };

        chart.setOption(option);
    }

    function initLocationBarChart() {
        var chart = echarts.init(document.getElementById('locationChart'));

        $.getJSON('../guo/guo_locations.json', function(data) {
            var categories = data.map(function(item) {
                return item.locationId;
            });
            var seriesData = data.map(function(item) {
                return item.shopIds.length;
            });

            var option = {
                xAxis: {
                    type: 'category',
                    data: categories,
                    inverse: true,
                    axisLabel: {
                        rotate: 45,
                        interval: 0
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                title: {
                    text: '各地的热门商铺数量', // 添加表头文本
                    left: 'center', // 标题居中
                    textStyle: {
                        fontWeight: 'bold', // 可选，加粗标题文字
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var location = params[0].name;
                        var shopCount = params[0].value;
                        var firstShopId = data.find(item => item.locationId === location)?.shopIds[0] || "无具体商铺信息";

                        return location + '<br/>商铺数量: ' + shopCount + '<br/>首个商铺ID: ' + firstShopId;
                    }
                },
                series: [{
                    data: seriesData,
                    type: 'bar'
                }]
            };

            chart.setOption(option);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    }



    initTotalSalesLineChart();
    initLocationBarChart(); // 初始化新添加的柱状图
    // 初始化五个图表，同时传递月份标题
    initChart('chart1', '../guo/month7.json', 'July - Top 10 Shops');
    initChart('chart2', '../guo/month8.json', 'August - Top 10 Shops');
    initChart('chart3', '../guo/month9.json', 'September - Top 10 Shops'); // 假定有相应的JSON文件
    initChart('chart4', '../guo/month10.json', 'October - Top 10 Shops'); // 同上
    initChart('chart5', '../guo/month11.json', 'November - Top 10 Shops'); // 同上
});

</script>
<!-- 添加一个包裹结论和折线图的容器，并应用相应的CSS类 -->
<div class="analysis-and-chart-container">
    <div class="analysis-text">
        <div style="text-align: center; margin-top: 30px;">
            <h2>七月至十一月前十名店铺营销数据趋势分析</h2>
            <p>
                经过对七月到十一月期间前十名店铺营销表现的分析，我们得出以下几点观察：
            </p>
            <ul>
                <li>
                    <strong>持续增长：</strong>所有顶尖店铺的销售额均呈现出稳步上升的趋势，表明市场活跃且营销策略得当。
                </li>
                <li>
                    <strong>八月高峰：</strong>特别地，八月的销售数据在分析的月份中最高，可能与季节性促销或暑期消费者支出增加有关。
                </li>
                <li>
                    <strong>业绩多样性：</strong>尽管多数店铺表现良好，但XYZ店铺在九月遭遇销量下滑，随后在十月实现了强劲反弹，显示出有效的应对措施得到了实施。
                </li>
                <li>
                    <strong>十一月趋稳：</strong>十一月的销售额稳定在一个略低于八月峰值的水平，预示着年终假期前的传统平稳期开始，随后可能会迎来年底的销售高潮。
                </li>
            </ul>
            <p>
                这些发现强调了持续监控市场动态并及时调整营销策略的重要性，以便抓住季节性机遇并应对任何业绩波动。
            </p>
        </div>
    </div>
    <div class="chart-container" id="totalSalesChart"></div>
</div>
<div class="chart-and-summary-container">
    <div class="chart-container" id="locationChart"></div>
    <div id="locationSummary" style="margin-top: 20px; text-align: center;">
    <h3>2016年下半年热门商铺分布总结</h3>
    <p>
        本图表展示了2016年下半年各地区的热门商铺数量，从中可以看出：
        <ul>
            <li>下半年商铺热度整体呈上升趋势，反映出节假日经济的积极影响。</li>
            <li>某些地区因举办特殊活动或节日庆祝，其热门商铺数量显著高于平均水平。</li>
            <li>尽管面临竞争加剧，少数几个地点的商铺凭借独特营销策略脱颖而出，成为持续的热点。</li>
        </ul>
        这些数据对于理解消费行为模式及制定未来营销策略具有重要价值。
    </p>
</div>
</div>
<div class="summary-section">
    <h2>总结</h2>
    <p>
        通过上述分析和图表展示，我们深入理解了2016年下半年各店铺的营销表现和热门商铺的分布情况。这些数据不仅揭示了市场趋势、季节性影响以及成功营销策略的案例，还为我们提供了宝贵的信息，指导未来如何更好地规划营销活动、优化店铺布局以及应对市场变化。持续的数据分析和策略调整将是推动业务持续增长的关键。
    </p>
</div>

</body>
</html>